<template>
	<view class="add-bank-card">
		<view style="padding: 30rpx;">
			<u-text text="请绑定持卡人本人银行卡" color="#666" size="24rpx"></u-text>
		</view>
		
		<u-form
			labelPosition="left"
			:model="formData"
			labelWidth="190rpx"
			ref="form"
		>
			<u-form-item label="持卡人" prop="person">
				<u-input v-model="formData.person" placeholder="持卡人" border="none" />
			</u-form-item>
			<u-form-item label="卡号" prop="number">
				<u-input v-model="formData.number" placeholder="银行卡号" border="none" />
			</u-form-item>
			<u-form-item label="卡类型" prop="type">
				<view @click="showTypePicker = true" class="flex-between">
					<u-text :text="formData.type" v-if="formData.type" color="#303133"></u-text>
					<u-text text="请选择卡类型" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;"></u-icon>
				</view>
				<u-picker
					:show="showTypePicker"
					:columns="typeColumns" 
					@confirm="confirmType"
					@cancel="showTypePicker = false"
				/>
			</u-form-item>
			<u-form-item label="手机号" prop="phone">
				<u-input v-model="formData.phone" placeholder="请输入手机号" border="none">
					<template slot="suffix">
						<u-code
							ref="uCode"
							seconds="60"
							changeText="X秒重新获取"
							@change="codeChange"
						/>
						<u-button
							:text="tips"
							size="mini"
							plain
							color="#2F75FA"
							@tap="getCode"
						/>
					</template>
				</u-input>
			</u-form-item>
			<u-form-item label="验证码" prop="captcha">
				<u-input v-model="formData.captcha" placeholder="请输入验证码" border="none" />
			</u-form-item>
			<u-form-item label="设置别名" prop="alias">
				<view class="flex-between">
					<u-input v-model="formData.alias" placeholder="请输入别名(最多4字)" border="none" maxlength="4" />
					<u-checkbox-group v-model="checked">
						<u-checkbox shape="circle" :name="formData.id" label="设为默认"></u-checkbox>
					</u-checkbox-group>
				</view>
			</u-form-item>
		</u-form>
		
		<view class="bottom-add-btn">
			<u-button text="确认添加" shape="circle" @click="add" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {},
			showTypePicker: false,
			typeColumns: [['储蓄卡']],
			tips: '',
			checked: false,
		}
	},
	methods: {
		add() {
			console.log(this.formData);
		},
		confirmType({ value }) {
			this.formData.type = value[0];
			this.showTypePicker = false;
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
			  // 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 1000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},

	}
}
</script>

<style lang="scss" scoped>
.add-bank-card {
	min-height: 100vh;
	background-color: #f3f3f3;
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	
	/deep/.u-form {
		background-color: #fff;
		padding: 10rpx 30rpx;
		
		&-item__body__left__content__label {
			color: #333;
		}
		
		.u-checkbox-label--left {
			> text {
				font-size: 28rpx;
				color: #2F75FA !important;
			}
		}
	}
}
</style>
